import React from 'react';
import { connect} from 'dva';
import {Input,Row,Col,Icon,Spin,DatePicker,Table} from 'antd'
import styles from './TeacherGroup.css';
import {downloadExcel} from '../services/attendance'
import  FileSaver from 'file-saver';
function TeacherAttendanceInRange({header,data}){
  let columns = [
    {title:'姓名',dataIndex:'name',key:'name',className:styles.name},
    {title:'上午正常',dataIndex:'morning.ok',key:'morningOk',className:styles.morning},
    {title:'上午迟到',dataIndex:'morning.error',key:'morningError',className:styles.morning},
    {title:'上午未签到',dataIndex:'morning.null',key:'morningNull',className:styles.morning},
    {title:'下午正常',dataIndex:'afternoon.ok',key:'afternoonOk',className:styles.afternoon},
    {title:'下午早退',dataIndex:'afternoon.error',key:'afternoonError',className:styles.afternoon},
    {title:'下午未签到',dataIndex:'afternoon.null',key:'afternoonNull',className:styles.afternoon},
  ];

  return (<Row>
    <Col span='24'>
      
    </Col>
    <Col span='24'>
      <Table
        title={()=><div className={styles.tableHeader}>{header}</div>}
        bordered
        pagination={false}
        columns={columns}
        dataSource={data}
      ></Table>
    </Col>
  </Row>)
}

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";  
// function dataURItoBlob(dataURI, callback) {
//     // convert base64 to raw binary data held in a string
//     // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
//     console.log(dataURI)
//     var byteString = atob(dataURI.split(',')[1]);
//     console.log(1)

//     // separate out the mime component
//     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
//     console.log(1)

//     // write the bytes of the string to an ArrayBuffer
//     var ab = new ArrayBuffer(byteString.length);
//     console.log(1)
//     var ia = new Uint8Array(ab);
//     for (var i = 0; i < byteString.length; i++) {
//         ia[i] = byteString.charCodeAt(i);
//     }
//     console.log(1)

//     // write the ArrayBuffer to a blob, and you're done
//     var bb = new Blob([ab]);
//     console.log(1)
//     return bb;
// }
var saveByteArray = function (data, name) {
        // var blob = new Blob(data, {type: "application/octet-stream;base64"}),
        //     url = window.URL.createObjectURL(blob);
        // console.log(data);
        a.href = "data:application/octet-stream;base64," + data;
        a.download = name;
        a.click();
        // console.log(data);
        // // window.URL.revokeObjectURL(url);
        // console.log(data);
        // dataURItoBlob(data,(blob)=>{
        //   console.log(blob)
        // });
    };



function TeahcerAttendanceRoute({
  teacher:{teachers,loading},
  dispatch,
  attendance:{
    fromToHeader,
    fromToLoading,
    fromToData,
    fromToStatus:{
      from,
      to,
      tag,
      week,}
    }
  }) {

  return (
    <div className={styles.normal}>
        <Row>
            <Col span='5'>开始时间:<DatePicker value={from}
              onChange={(v)=>{
                dispatch({type:'attendance/fromToSearch',payload:{from:v}})
              }}
            /></Col>
            <Col span='5'>结束时间:<DatePicker value={to} 
              onChange={(v)=>{
                dispatch({type:'attendance/fromToSearch',payload:{to:v}})
              }}/></Col>
            <Col span='6'>查询年级:<select value={tag} onChange={(e)=>{
                dispatch({type:'attendance/fromToSearch',payload:{tag:e.target.value}})
              }}>
                <option value='一年级'>一年级</option>
                <option value='二年级'>二年级</option>
                <option value='三年级'>三年级</option>
                <option value='四年级'>四年级</option>
                <option value='五年级'>五年级</option>
                <option value='六年级'>六年级</option>
                <option value='七年级'>七年级</option>
                <option value='八年级'>八年级</option>
                <option value='九年级'>九年级</option>
              </select></Col>
              <Col span='5'>周数:<input value={week} onChange={(e)=>{
                dispatch({type:'attendance/fromToSearch',payload:{week:e.target.value}})
              }}/></Col>
            <Col span='3'><button 
            className='btn btn-primary'
            disabled={
              fromToLoading || to < from 
            }
            onClick={()=>{
              //console.log('yes')
                dispatch({type:'attendance/fromTo',payload:{from,to,tag}})
            }}
            >查询</button>
            </Col>
            {fromToData?<Col span='24'>< button 
            className='btn btn-info'
            onClick={()=>{
              downloadExcel(fromToData
              ,{
                grade:tag,
                time:from.format('YYYY年M月D日') + " --- " + to.format('YYYY年M月D日'),
                week:`第${week}周`
              },(data)=>{
                {/*let blob = new Blob(data, {type:"octet/stream"});
                let uri = URL.createObjectURL(blob);
                console.log(uri)*/}
                {/*window.open("data:application/octet-stream;base64," + data);*/}

                saveByteArray(data, `${tag} 第${week}周.xlsx`);
                {/*console.log(data);*/}
              })
            }}
            >下载</button></Col>:null}
            {fromToData?<Col span='24'>< TeacherAttendanceInRange 
            header={fromToHeader}
            data={fromToData}
            /></Col>:null}
        </Row>
    </div>
  );
}

function mapStateToProps({teacher,attendance}) {
  return {teacher,attendance};
}

export default connect(mapStateToProps)(TeahcerAttendanceRoute);
